define([
    'bbcare',
], function ($bb) {
    var event = {}, URL = $bb.baseUrl('followup'), vm = null

    event.init = function () {
        if (vm) vm = null
        var params = $('.content-main').data()
        createVue(params.params)
    }

    function createVue (params) {
        vm = new Vue({
            el: '#root',
            data: {
                type1: 1,
                type2: 1,
                type3: 1,
                patientId: params.id,
                brith: params.birth,
                table: {
                    loading: false,
                    data: [],
                    current: 1,
                    size: 10,
                    total: 0
                }
            },
            watch: {
                type1: function (val) {
                    console.log(val)
                    this.getList()
                },
                type2: function (val) {
                    console.log(val)
                    this.getCountList()
                },
                type3: function (val) {
                    this.getdurgList(val)
                }
            },
            created: function () {
                this.getList()
                this.getCountList()
                this.getdurgList()
                console.log(this.brith)
            },
            methods: {
                getList: function () {
                    var that = this
                    var param = {
                        patientId: this.patientId,
                        type: this.type1
                    }
                    $bb.ajax({
                        url: URL + 'followup/service/dumpChart/patient/log/statistics',
                        data: JSON.stringify(param),
                        success: function (res) {
                            if (res.success) {
                                console.log(res.data)
                                that.initCharts1(res.data)
                            } else {
                                that.$message.error(res.msg)
                            }
                        }
                    })
                },
                getCountList: function () {
                    var that = this
                    var param = {
                        patientId: this.patientId,
                        type: this.type2
                    }
                    $bb.ajax({
                        url: URL + 'followup/service/dumpChart/patient/times/statistics',
                        data: JSON.stringify(param),
                        success: function (res) {
                            if (res.success) {
                                console.log(res.data)
                                that.initCharts2(res.data)
                            } else {
                                that.$message.error(res.msg)
                            }
                        }
                    })
                },
                initCharts1: function (data) {
                    var info = {
                        date: [],
                        one: [],
                        two: []
                    }
                    data.forEach(function (item) {
                        info.date.push(item.days)
                        info.one.push(item.quantity)
                        info.two.push(item.count)
                    })
                    var charts1 = echarts.init(document.getElementById('countForDay'))
                    charts1.setOption(getCharts1Option(info))

                },
                initCharts2: function (data) {
                    var info = {
                        date: [],
                        line: {
                            one: [],
                            two: []
                        },
                        bar: {
                            one: [],
                            two: []
                        }
                    }
                    data.forEach(function (item) {
                        info.date.push(item.days)
                        info.line.one.push(item.leftMinute)
                        info.line.two.push(item.rightMinute)
                        info.bar.one.push(item.leftQuantity)
                        info.bar.two.push(item.rightQuantity)
                    })
                    var charts2 = echarts.init(document.getElementById('countForAll'))
                    charts2.setOption(getCharts2Option(info))
                },
                handleChangePage: function (num) {
                    this.table.current = num
                },
                getdurgList: function () {
                    var that = this
                    var param = {
                        patientId: this.patientId,
                        type: this.type3
                    }
                    this.table.loading = true
                    $bb.ajax({
                        url: URL + 'followup/service/dumpChart/patient/useDrug/statistics',
                        data: JSON.stringify(param),
                        success: function (res) {
                            if (res.success) {
                                that.table.data = res.data
                                console.log(that.table.data)
                            } else {
                                that.$message.error(res.msg)
                            }
                            that.table.loading = false
                        }
                    })
                }
            }
        })
    }

    $('.content-main').on('click', '._pumpBreastDetail_back', function () {
        $bb.openPage('pumpBreastList')
    })

    return event
})



/**
 * 点击天数发送不同的请求
 */
$('.content-main').on('click', '._pumpBreastDetail_block_header_btn', function () {
    // 改变 UI 样式
    var selfIndex = $(this).data('index')
    var allBtn = $('._pumpBreastDetail_block_header_btn')
    for (var i = 0; i < allBtn.length; i++) {
        if ($(allBtn[i]).data('index') === selfIndex) {
            $(allBtn[i]).removeClass('active')
        }
    }
    $(this).addClass('active')
    // 发送请求
    var type = $(this).data('type')
    selfIndex == '1' ?
        countForDay(type) :
        selfIndex == '2' ?
            countForAll(type) :
            null

})

$('.content-main').on('click', '._pumpBreastDetail_block_header_export', function () {
    var html = '<html>' +
        '<head>' +
        '<meta charset="utf-8">' +
        '</head>' +
        '<body>' +
        '<table>' +
        '<tr>' +
        '<th colspan="16" align="center" style="text-align:center; font-size:16px;" >Js表格</th>' +
        '</tr>' +
        '<tr>' +

        '</tr>' +
        '</table>' +
        '</body>' +
        '</html>'
    var blob = new Blob([html], { type: "application/vnd.ms-excel" })
    //这是点击生成Excel的按钮id
    var a = document.createElement('a')
    a.setAttribute('id', 'out_excel')
    a.href = URL.createObjectURL(blob)
    var date = new Date()
    var year = date.getFullYear(), month = date.getMonth() + 1, day = date.getDate()
    a.download = year + '-' + month + '-' + day + ".xls"
    a.click()
})

function getCharts1Option (data) {
    return {
        grid: {
            left: 50,
            top: 50,
            right: 100,
            bottom: 50,
        },
        legend: {
            data: ['泵乳次数', '泵乳量'],
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
                label: {
                    backgroundColor: '#283b56'
                }
            },
            formatter: function (params) {
                if (!params[0] || !params[1] || !params[0].value || !params[1].value) return ''
                var html = '<div>' +
                    '<div>泵乳日志统计</div>' +
                    '<div style="display: inline-block; width: 10px; height: 10px;border-radius: 50%;background: #F56C6C; margin-right: 5px"></div>' +
                    '泵乳次数： ' + params[0].value + ' 次' + '<br />' +
                    '<div style="display: inline-block; width: 10px; height: 10px;border-radius: 50%;background: #409EFF; margin-right: 5px"></div>' +
                    '泵乳量： ' + params[1].value + ' 毫升' + '<br />' +
                    '</div>'
                return html
            }
        },
        xAxis: [
            {
                type: 'category',
                data: data.date
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '（毫升）'
            },
            {
                type: 'value',
                name: '（次数）',
                splitNumber: 1
            }
        ],
        series: [
            {
                name: '泵乳次数',
                data: data.two,
                type: 'line',
                yAxisIndex: 1,
                itemStyle: {
                    normal: {
                        color: '#F56C6C'
                    }
                }
            },
            {
                name: '泵乳量',
                data: data.one,
                type: 'bar',
                barMaxWidth: 50,
                itemStyle: {
                    normal: {
                        color: '#409EFF'
                    }
                }
            }
        ]
    }
}

function getCharts2Option (data) {
    return {
        grid: {
            left: 50,
            top: 50,
            right: 100,
            bottom: 50,
        },
        legend: {
            data: ['左乳房泵乳持续时间', '右乳房泵乳持续时间', '左乳房泵乳量', '右乳房泵乳量'],
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
                label: {
                    backgroundColor: 'rgba(0,0,0,1)'
                }
            },
            formatter: function (params) {
                if (!params[0] || !params[1] || !params[2] || !params[3]) return ''
                var html = '<div>' +
                    '<div>泵乳次数统计</div>' +
                    '<div style="display: inline-block; width: 10px; height: 10px;border-radius: 50%;background: #1cbacc; margin-right: 5px"></div>' +
                    '左乳房泵乳持续时间：' + params[0].value + ' 分钟' + '<br />' +
                    '<div style="display: inline-block; width: 10px; height: 10px;border-radius: 50%;background: #fd952e; margin-right: 5px"></div>' +
                    '右乳房泵乳持续时间：' + params[1].value + ' 分钟' + '<br />' +
                    '<div style="display: inline-block; width: 10px; height: 10px;border-radius: 50%;background: rgba(200, 200, 169, 1); margin-right: 5px"></div>' +
                    '左乳房泵乳量：' + params[2].value + ' 毫升' + '<br />' +
                    '<div style="display: inline-block; width: 10px; height: 10px;border-radius: 50%;background: rgba(131, 175, 155, 1); margin-right: 5px"></div>' +
                    '右乳房泵乳量：' + params[3].value + ' 毫升' + '<br />' +
                    '</div>'
                return html
            }
        },
        xAxis: [
            {
                type: 'category',
                data: data.date
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '（毫升）'
            },
            {
                type: 'value',
                name: '（持续时间）',
            }
        ],
        series: [
            {
                name: '左乳房泵乳持续时间',
                data: data.line.one,
                type: 'line',
                yAxisIndex: 1,
                itemStyle: {
                    normal: {
                        color: '#1cbacc'
                    }
                }
            },
            {
                name: '右乳房泵乳持续时间',
                data: data.line.two,
                type: 'line',
                yAxisIndex: 1,
                itemStyle: {
                    normal: {
                        color: '#fd952e'
                    }
                }
            },
            {
                name: '左乳房泵乳量',
                data: data.bar.one,
                type: 'bar',
                barMaxWidth: 50,
                itemStyle: {
                    normal: {
                        color: 'rgba(200, 200, 169, 1)'
                    }
                }
            },
            {
                name: '右乳房泵乳量',
                data: data.bar.two,
                type: 'bar',
                barMaxWidth: 50,
                itemStyle: {
                    normal: {
                        color: 'rgba(131, 175, 155, 1)'
                    }
                }
            }
        ]
    }
}
